<!--pay 付费数据模板;-->
<template>
  <article>
  <game-qry-param  @queryForm="query"/>
  <el-table :data="tabledata" border show-summary style="width: 100%" :summary-method="getSummaries"  :header-cell-style="{backgroundColor:theme.bgcolor,color:theme.activeColor}"
            v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-table-column align="center" type="index"></el-table-column>
    <el-table-column align="center" prop="regist_date" sortable label="日期" :formatter="dateFormatter"></el-table-column>
    <el-table-column align="center" prop="channel" sortable label="渠道/区服"></el-table-column>
    <el-table-column align="center" prop="regist_num" sortable label="新增账号"></el-table-column>
    <el-table-column align="center" prop="LTV2" sortable label="LTV2"></el-table-column>
    <el-table-column align="center" prop="LTV3" sortable label="LTV3"></el-table-column>
    <el-table-column align="center" prop="LTV4" sortable label="LTV4"></el-table-column>
    <el-table-column align="center" prop="LTV5" sortable label="LTV5"></el-table-column>
    <el-table-column align="center" prop="LTV6" sortable label="LTV6"></el-table-column>
    <el-table-column align="center" prop="LTV7" sortable label="LTV7"></el-table-column>
    <el-table-column align="center" prop="LTV10" sortable label="LTV10"></el-table-column>
    <el-table-column align="center" prop="LTV15" sortable label="LTV15"></el-table-column>
    <el-table-column align="center" prop="LTV20" sortable label="LTV20"></el-table-column>
    <el-table-column align="center" prop="LTV25" sortable label="LTV25"></el-table-column>
    <el-table-column align="center" prop="LTV30" sortable label="LTV30"></el-table-column>
    <el-table-column align="center" prop="LTV45" sortable label="LTV45"></el-table-column>
    <el-table-column align="center" prop="LTV60" sortable label="LTV60"></el-table-column>

  </el-table>
  </article>
</template>

<script>
  import gameQryParam from "@/components/gameQryParam";
  import {mapState,mapGetters} from 'vuex';
  import {getLtv} from "../../common/js/util";
  export default {
    components: {gameQryParam},
    data() {
      return {}
    },
    mounted() {
    },
    computed:{
      ...mapState( {
        theme: state => state.app.theme,
        tabledata: state => state.pay.tableData,
        loading:state => state.pay.loading,
      })
    },
    methods :{
      dateFormatter:function(row, column, cellValue) {
        return cellValue?new Date(cellValue).Format("yyyy-MM-dd"):'';
      },
      getSummaries:function (params ) {
        const sums = [];
        const{columns, data} = params;
        columns.forEach((column,index) => {
          sums[index] = '';
          let values = data.map(item => Number(item[column.property] || 0));
          if(index === 0){
            sums[index] = '合计';
            return;
          }
          if(index === 3) {
            sums[index] = values.reduce((p, c) => {
              return p + c;
            }, 0);
            return;
          }
          if(index >3){
            let s = {4:2,5:3,6:4,7:5,8:6,9:7,10:10,11:15,12:20,13:25,14:30,15:45,16:60};
            let ltv = 0;
            for(let i=0;i<data.length;i++){
              let datas = data[i].recharge_num;
              ltv += getLtv(datas,s[index]);
            }
            sums[index] = (ltv/sums[3]).toFixed(2);
          }

        });
        return sums;
      },
      query:function (param) {
        this.$emit('query',param);
      }
    }
  }

</script>

<style scoped>

</style>

